<template>
  <div class="app-container">
    <el-row>
      <el-col :span="20">
        <a-title></a-title>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <el-button type="primary" @click="onSubmit">保 存</el-button>
      </el-col>
    </el-row>

    <el-form ref="form" label-width="150" :inline="true" :model="form">
      <el-row>
        <el-col :span="6">
          <el-form-item label="项目名称">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.projectName }}</pre>
              </div>
              <el-input disabled v-model="form.projectName"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属单位">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.affiliatedUnit }}</pre>
              </div>
              <el-input disabled v-model="form.affiliatedUnit"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属行业">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.industry }}</pre>
              </div>
              <el-input disabled v-model="form.industry"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目类型">
            <el-input clearable v-model="form.projectType"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="总投资">
            <el-input clearable v-model="form.totalInvestment" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报告完成时间">
            <el-date-picker
              v-model="form.reportTime"
              type="date"
              range-separator="-"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="需记录的特殊风险(非常规风险)">
            <el-input clearable v-model="form.specialRisk" style="width:400px" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  getIndicatorReport,
  addIndicatorReport,
  updateIndicatorReport
} from "@/api/business/indicatorReport";
import { listGeneral } from "@/api/projectWorkbench/projectList/projectGeneral";
import aTitle from "@/components/Title";
export default {
  name: "IndicatorReport",
  components: { aTitle },
  data () {
    return {
      form: {
        projectName: "",
        affiliatedUnit: "",
        industry: "",
        reportTime: "",
        totalInvestment: "",
        specialRisk: "",
        projectType: "",
      },
      queryParams: {}
    };
  },
  created () {
    this.getProjectInfo(this.$route.params.projectId);
  },
  methods: {
    getProjectInfo (projectId) {
      listGeneral(projectId).then(res => {

        if (res.code === 200) {
          //项目名称
          this.form.projectName = res.data.name;
          //建设单位
          this.form.affiliatedUnit = res.data.party;
          //所属行业
          this.form.industry = res.data.industry;

          this.selectIndicatorReport(this.$route.params.id);
        }
      });
    },
    selectIndicatorReport (businessId) {
      getIndicatorReport({ businessId: businessId }).then(response => {

        if (response.code === 200) {
          if (response.data) {
            this.queryParams = response.data;
            this.form = JSON.parse(response.data.indicatorData);
          }
        } else {
          this.msgError(response.msg);
        }
      });
    },
    onSubmit () {
      this.$refs["form"].validate(valid => {

        if (valid) {
          this.queryParams.indicatorData = JSON.stringify(this.form);
          if (this.queryParams && this.queryParams.guid) {
            updateIndicatorReport(this.queryParams).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            var params = {
              projectId: this.$route.params.projectId,
              businessId: this.$route.params.id,
              businessTypeId: this.$route.params.businessCategoryId,
              indicatorData: JSON.stringify(this.form)
            };

            addIndicatorReport(params).then(response => {
              if (response.code === 200) {
                this.queryParams.guid = response.data.guid;
                this.msgSuccess("新增成功");
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-col-title {
  border-radius: 4px;
  margin-bottom: 10px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  padding-left: 8px;
}
</style>